<template>
    <el-container>
        <el-header>
            <span class="h1">
                <img src="@/assets/img/logo2.png" />
            </span>
            <div style="margin-left: 270px;margin-top: -40px;">
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" text-color="#141414"
                    background-color="#bbd7e4" active-text-color="#dc1111">
                    <!-- <el-menu-item index="1">旅游管理系统</el-menu-item> -->
                    <el-menu-item index="1" @click="toVsHome()">首页</el-menu-item>
                    <el-menu-item index="2" @click="toScenic()">景点信息</el-menu-item>
                    <el-menu-item index="3">美食信息</el-menu-item>
                    <el-menu-item index="4" @click="toVsHotel()">酒店信息</el-menu-item>
                    <!-- <el-menu-item index="5">旅游路线信息</el-menu-item>
          <el-menu-item index="6">交流论坛</el-menu-item> -->
                    <el-menu-item index="7" v-if="user.roleId === 1" @click="toHoutai()">后台管理</el-menu-item>
                    <el-menu-item index="8" @click="toVsPerson()">个人中心</el-menu-item>

                    <div>
                        <el-submenu index="9" class="submenu">
                            <template slot="title">{{ user.name }}
                                <el-avatar shape="circle" :size="40" :src="user.cover"></el-avatar>
                            </template>
                            <el-menu-item index="9-1" @click="toVsPerson()">个人中心</el-menu-item>
                            <!-- <el-menu-item index="8-2">我的收藏</el-menu-item> -->
                            <el-menu-item index="9-3" @click="quit()">退出登录</el-menu-item>
                        </el-submenu>
                    </div>
                </el-menu>
            </div>
        </el-header>
        <el-main>
            <div class="main">
                <div class="m1">

                </div>
                <diV class="m2">
                    <span style="font-size: 30px;">美食介绍</span>
                    <div
                        style="width: 120px;height:5px;border-bottom: 2px dashed #000;border-top: 2px dashed #000;margin:auto;">
                    </div>
                    <div class="foodMain" style="" v-for="food in foods" :key="food.id" :label="food.cover"
                        :value="food.id">
                        <div class="f1">
                            <img :src="food.cover" class="image">
                        </div>
                        <div class="f2">
                            <span class="title">{{ food.name }}</span>
                            <div class="concent">{{ food.concent }}</div>
                        </div>
                    </div>
                </diV>

            </div>


        </el-main>
    </el-container>
</template>

<script>
export default {
    name: "VsFood",
    data() {
        return {
            user: JSON.parse(sessionStorage.getItem('CurUser')),
            activeIndex: '1',
            activeIndex2: '3',
            foods: [],
            //limit: 3,    只显示前三项
        };
    },

    //获取数据
    mounted() {
        this.fetchFood();
    },
    methods: {
        //获取美食信息
        fetchFood() {
            this.$axios.post(this.$httpUrl + '/food/listPage', {
            }).then(res => res.data).then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.foods = res.data;
                }
            }).catch(error => {
                console.error("查询景点分类信息异常：", error);
            });
        },
        // //点击导航控制台弹出信息
        // handleSelect(key, keyPath) {
        //     console.log(key, keyPath);
        // },
        //各路由跳转
        toHoutai() {
            this.$router.replace('Person');
        },
        //前端的个人中心
        toVsPerson() {
            this.$router.replace('VsPerson');
        },
        //退出登录
        quit() {
            this.$router.replace('/');
        },
        //前端首页
        toVsHome() {
            this.$router.replace('VsHome');
        },
        //景点信息
        toScenic() {
            this.$router.replace('VsScenic');
        },
        //酒店信息
        toVsHotel() {
            this.$router.replace('VsHotel');
        },
    },
}
</script>

<style scoped>
.element.style {
    width: 120px;
}

img {
    width: 120px;
    /* margin-left: 30px; */
    /* border: 1px solid black; */

}

.el-header {
    /* background-color: #545c64; */
    color: black;
    background-color: #bbd7e4;
    line-height: 60px;
    border-top: 1px solid rgb(209, 207, 207);
    border-bottom: 1px solid rgb(209, 207, 207);
    line-height: 61px;
}

.el-main {
    /* background-color: #E9EEF3; */
    /* background: url(@/assets/img/bj1.jpg) no-repeat; */
    color: #333;
    text-align: center;
    padding: 0px;

}

.el-menu-demo {
    /* width: 100%; */
    background-color: #bbd7e4;
    /* background-color: #545c64; */
    margin-left: 100px;
    margin-top: -76px;

}

/* 导航栏下拉框右侧 */
.submenu {
    /* border: 1px solid black; */
    width: 150px;
    margin-left: 800px;
    /* margin-top: -32px; */
    height: 50px;
}

/* 内容 */
.foodMain {
    width: 70%;
    height: 220px;
    margin: auto;
    display: flex;
    border: 1px dashed #ccc;
    margin-top: 20px;
    transition: transform 0.3s ease;
    box-shadow: 0px 0px 20px -10px #0a1032;
    /* 添加过渡效果 */
}

.foodMain:hover {
    transform: scale(1.1);
    /* 鼠标悬停时放大 */
}

.f1 {
    width: 40%;
    height: 220px;
    display: block;
    /* border: 1px solid black; */
}

.f2 {
    width: 60%;
    height: 220px;
    display: block;
    background-color: rgb(254, 242, 242);
    /* border: 1px solid black; */
}

.image {
    width: 100%;
    height: 200px;
    display: block;
}

.title {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin-top: 50px;
    /* border: 2px solid rgb(231, 16, 16); */
}

.concent {
    width: 500px;
    height: 180px;
    margin-left: 25px;
    text-align: left;
    /* 文字左对齐 */
    text-indent: 2em;
    /* 首句空两格，1em约等于一个汉字的宽度 */

}

.main {
    /* border: 1px solid black; */
    /* width: 100%; */
    margin: auto;
    /* height: 1000px; */
}

.m1 {
    width: 100%;
    height: 400px;
    background: url(@/assets/img/f11.jpg);
    /* object-fit: contain; */
}

.m2 {
    width: 100%;
    /* height: 300px; */
    margin-top: 20px;
    /* border: 1px solid black; */
}

</style>